<template>
  <div class="devired-result">
    <el-row :gutter="20" class="header">
      <el-col :span="12" align="center"><span>运行结果</span></el-col>
      <el-col :span="12">
        <el-row>
          <el-col :span="12" align="center"><span>用户标识</span></el-col>
          <el-col :span="12" align="center"
            ><span>{{ title }}</span></el-col
          >
        </el-row>
      </el-col>
    </el-row>
    <el-row :gutter="20" class="content">
      <el-col :span="12" align="center"><span class="result-tips">成功</span></el-col>
      <el-col :span="12" align="center">
        <ul>
          <li v-for="(item, index) in previewResults" :key="index">
            <el-row>
              <el-col :span="12">{{ item[0] }}</el-col>
              <el-col :span="12">{{ item[1] }}</el-col>
            </el-row>
          </li>
        </ul>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  props: {
    previewResults: {
      type: Array,
      required: true,
      default: () => []
    },
    title: {
      type: String,
      default: '标签值'
    }
  },
  data() {
    return {}
  },
  methods: {}
}
</script>

<style lang="scss">
.devired-result {
  padding: 0 20px;
  .header {
    font-weight: bold;
    height: 60px;
    border-bottom: 1px solid #eee;
    span {
      display: inline-block;
      width: 80%;
      height: 40px;
      line-height: 40px;
      margin: 10px 0 10px 0;
      background-color: #fcf5e5;
      border-radius: 20px;
    }
  }
  .content {
    height: 250px;
    .result-tips {
      display: inline-block;
      font-size: 25px;
      color: $tag-green;
      margin-top: 120px;
    }
    li {
      font-size: 16px;
      height: 50px;
      line-height: 50px;
    }
  }
}
</style>
